<template>
  <div class="itemFour">
    <h5>不同年龄段患病率(单位:1‰)</h5>
    <div id="youEchar"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { onMounted, reactive } from 'vue';
import { itemFour } from '../../../api/echart'
export default {
  name: 'ItemFour',

  setup() {
    let datas = reactive({})

    async function getState() {
      datas = await itemFour()
    }

    onMounted(() => {
      let youchar = echarts.init(document.getElementById('youEchar'))

      getState().then(() => {
        console.log('柱状图', datas)

        youchar.setOption({
          xAxis: {
            type: 'category',
            data: datas.day,
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#e6b600'
                }
              }
            },
          },
          series: [
            {
              name: '服饰',
              type: 'bar',
              data: datas.datas.Chemicals,
              stack: 'total'
            },
            {
              name: '数码',
              type: 'bar',
              data: datas.datas.Clothes,
              stack: 'total'
            },
            {
              name: '家电',
              type: 'bar',
              data: datas.datas.Electrical,
              stack: 'total'
            },
            {
              name: '家具',
              type: 'bar',
              data: datas.datas.digit,
              stack: 'total'
            },
            {
              name: '日化',
              type: 'bar',
              data: datas.datas.gear,
              stack: 'total'
            },
          ]
        })
      })
    })




    return {
      getState, datas
    }
  }
}
</script>

<style scoped>
#youEchar {
  height: 300px;
  margin-left: 20px;
  margin-top: -40px;
}
h5 {
  color: #fff;
  text-align: center;
}
</style>
